<template>
	<view>
		<view class="inputSend-group">
			<view class="inputSend-button-before"></view>
			<view class="inputSend-input-main">
				<mp-html v-if="1 == 2" ref="article" :container-style="style" :content="content"
				domain="https://mp-html.oss-cn-hangzhou.aliyuncs.com" :editable="editable" @remove="remove"></mp-html>
				<input class="inputSend_frame_1" v-model="clearInputSendFrame" type="text" hold-keyboard="true" @input="inputSend_input" @confirm="sendMessage" adjust-position="true" />
			</view>
			<view class="inputSend-button-after">
				<view class="inputSend-button-after-1" :style="'background-color:' + (this.buttonAction ? '#94a6ea' : '#007aff')" @click="sendMessage()"  @touchend.prevent="sendMessage()">{{showButton[showButtonIndex]}}</view>
			</view>
		</view>
	</view>
</template>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script>
	import mphtml from '../../uni_modules/mp-html/components/mp-html/mp-html'
	import content from './content'
	import { setClipboardData, getClipboardData } from '@/uni_modules/u-clipboard/js_sdk'
	export default {
		components: {
			mphtml,
		},
		props:["inputType"],
		data() {
			return {
				showButton:['发 送','搜 索','完 成','下一个','前 往'],
				showButtonIndex:0,
				showInputValue:null,
				buttonAction:true,
				clearInputSendFrame:null,
				mpHtml:null,
				content,
				editable: true,
				style:"background-color: #ffffff;padding: 10px;word-break: break-all;max-height: 100px;"
			}
		},
		mounted(){
			console.log(getApp().globalData.userAllInfo.userInfo.username)
			this.$refs.article.insertText()
			/**
			 * @description 设置获取链接的方法
			 * @param {String} type 链接的类型（img/video/audio/link）
			 * @param {String} value 修改链接时，这里会传入旧值
			 * @returns {Promise} 返回线上地址
			 *   type 为音视频时可以返回一个数组作为源地址
			 *   type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
			 */
			this.$refs.article.getSrc = (type, value) => {
				return new Promise((resolve, reject) => {
					if (type === 'img' || type === 'video') {
						uni.showActionSheet({
							itemList: ['本地选取', '远程链接'],
							success: res => {
								if (res.tapIndex === 0) {
									// 本地选取
									if (type === 'img') {
										uni.chooseImage({
											count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
											success: res => {
												// #ifdef MP-WEIXIN
												if (res.tempFilePaths.length == 1 && wx.editImage) {
													// 单张图片时进行编辑
													wx.editImage({
														src: res.tempFilePaths[0],
														complete: res2 => {
															uni.showLoading({
																title: '上传中'
															})
															upload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
																uni.hideLoading()
																resolve(res)
															})
														}
													})
												} else {
													// #endif
													uni.showLoading({
														title: '上传中'
													});
													(async () => {
														const arr = []
														for (let item of res.tempFilePaths) {
															// 依次上传
															const src = await upload(item, type)
															arr.push(src)
														}
														return arr
													})().then(res => {
														uni.hideLoading()
														resolve(res)
													})
													// #ifdef MP-WEIXIN
												}
												// #endif
											},
											fail: reject
										})
									} else {
										uni.chooseVideo({
											success: res => {
												uni.showLoading({
													title: '上传中'
												})
												upload(res.tempFilePath, type).then(res => {
													uni.hideLoading()
													resolve(res)
												})
											},
											fail: reject
										})
									}
								} else {
									// 远程链接
									this.callback = {
										resolve,
										reject
									}
									this.$set(this, 'modal', {
										title: (type === 'img' ? '图片' : '视频') + '链接',
										value
									})
								}
							}
						})
					} else {
						this.callback = {
							resolve,
							reject
						}
						let title
						if (type === 'audio') {
							title = '音频链接'
						} else if (type === 'link') {
							title = '链接地址'
						}
						this.$set(this, 'modal', {
							title,
							value
						})
					}
				})
			}
			
		},
		methods:{
			sendMessage(){
				if(this.showInputValue == "" || this.showInputValue == null){
					return;
				}
				if (this.inputType.username == "" || this.inputType.username == null) {
					uni.showToast({
						title: '未获到取用户名，消息发送失败',
						duration: 2000
					});
					return;
				}
				/*var b;
				var c = getClipboardData().then(result =>{
					b = result;
					 return result;
				})
				console.log(c)*/
				var inputSendMessage = this.showInputValue
				this.$emit("InputSendData",inputSendMessage);
				
				this.clearInputSendFrame='';
				this.showInputValue = null;
				this.buttonAction = true;
				
			},
			inputSend_input(e){
				if(e.detail.value == "" || e.detail.value == null){
					this.buttonAction = true;
				}else {
					this.buttonAction = false;
				}
				this.showInputValue = e.detail.value
			},
			// 删除图片/视频/音频标签事件
			remove(e) {
				// 删除线上资源
				remove(e.src)
			},
		}
	}
</script>

<style>
	.inputSend-group{
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		width: 100vw;
		min-width: 250px;
		background-color: #4f4f4f;
	}
	.inputSend-button-before{
		width: 30px;
		height: 25px;
		background-color: #6c6a6a;
	},
	.inputSend-button-after{
		width:60px;
		background-color: #6c6a6a;
	}
	.inputSend-button-after-1{
		width: 45px;
		height: 25px;
		border-radius: 3px;
		color: #fff;
		background-color: #007aff;
		text-align: center;
		line-height: 25px;
		font-weight: 600;
	}
	.inputSend-input-main{
		width: 100%;
		padding: 0 8px;
	}
	.inputSend_frame_1{
		height: 25px;
		background-color: #d2d2d2;
	}
</style>